<!DOCTYPE html>
<html>
<head>
    <title>赞赏</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/home.css">
    <link rel="stylesheet" href="/plugins/fontaw/css/font-awesome.css">
<style>
    .kk-block{padding:0.5rem;background-color: white;margin-bottom: 0.5rem}
    .avatar{border-radius: 50%}
    .kk-flex{display: flex}
    .col-2{width:16.666%}
    .col-10{width:83.333%;padding-left:0.3rem}
    .kk-flex p{text-align: left}
    .ul_money{list-style: none; width: 75%;margin: 0 auto}
    .ul_money li{float: left;width:2.5rem;padding:0.3rem;border:forestgreen solid 1px;margin: 0.3rem;border-radius: 5px}
    .ul_disea{margin: 0 auto;padding:0px;list-style: none}
    .ul_disea li{float: left;padding:0.1rem 0.2rem;border:grey solid 1px;margin: 0.2rem;border-radius: 5px;font-size: 0.6rem; }
    .texta{width: 96%;margin-top: 0.5rem;border: none;background-color: #f1f1ef;padding:0.3rem}
    .footer{position: fixed;bottom: 0px}
    .rd-bg{background-color:#1aad19;color:white}
    .selIput{width: 2.2rem;height: 1.1rem;top:0px;left: 0px;line-height:1.1rem;border: none;background-color:#1aad19 }
    .selcom{}
</style>
</head>
<body>
<div class="kk-block ">
    <div class="kk-flex">
        <div class="col-2">
            <img src="/mod-page/images/avatar-icon.png"  width="50" class="avatar"/>
        </div>
        <div class="col-10">
            <p><span class="docName">张三</span> <span style="font-size:0.6rem;color:grey">医生</span></p>
            <p><span style="color:grey">您的支持将鼓励我继续进步</span></p>
        </div>
    </div>
    <div class="kk-flex">
         <ul class="ul_money">
             <li money="9">￥9</li> <li  money="39">￥39</li> <li  money="99">￥99</li> <li money="199">￥199</li>
             <li  money="999">￥999</li> <li class="selcom"><span class="selText">自定义</span><input class="selIput" style="display: none" type="number"/></li>
         </ul>
    </div>
</div>

<div class="kk-block ">
 <p>最多选择3个本次诊疗的病、症 名</p>
   <ul class="ul_disea">
      <li>儿科</li>
      <li>妇科</li>
      <li>男科</li>
      <li>内科</li>
      <li>内科</li>
      <li>外科</li>
      <li>骨伤</li>
      <li>皮肤病</li>
      <li>颈椎腰椎病</li>
      <li>五官疾病</li>
      <li>亚健康</li>
      <li>肿瘤</li>
      <li>疑难杂症</li>
   </ul>
    <p style="padding-top: 0.5rem" id="commnetText">
        <textarea placeholder="请写下您对本次诊疗的详细评价"  class="texta" rows="5" class="commarea"></textarea>
    </p>
</div>

<div class="kk-block footer" style="margin-bottom: 0px">
    <p style="font-size: 0.6rem;color: grey;text-align: center">您支付的赞赏费用将全属于医生</p>
    <a class="weui-btn weui-btn_primary" href="javascript:" style="line-height:2;width:90%" id="submitDataBtn" > 赞赏 </a>
</div>
<div id="bottomDiv" style="height: 15rem"></div>
<script src="/lib/jquery-2.1.4.js"></script>
<script src="/js/jquery-weui.js"></script>
<script src="/js/home.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8"></script>
<script>
       var  patientId = getQueryString("patientId");
       var  doctorId = getQueryString("doctorId");
       var  disea ="";
       var upMoney = 0;
       $(document).ready(function (){
           bindClick();
           loadDoctorInfo();
       });

       function loadDoctorInfo(){
           $.ajax({
               url:"/d/doctor/getDoctorInfo",
               data:{"doctorId":doctorId},
               dataType:"json",
               success:function (da){
                   if(da.data){
                       $(".avatar").attr("src",da.data.picPath);
                       $(".docName").text(da.data.doctorname);
                   }
               }
           });
       }

       function bindClick(){
           $(".ul_money li").click(function(){
               $(".ul_money li").removeClass("rd-bg");
               $(this).addClass("rd-bg");
               if(!$(this).hasClass("selcom")){
                   upMoney = parseFloat($(this).attr("money"));
               }
           });
       }

        $(".selcom").click(function(){
            $(this).find(".selText").hide();
            $(this).find("input").show().trigger("focus");
        });

        $(".ul_money").on("blur",".selIput",function(){
             if($(this).val()!="")
                 upMoney = parseFloat($(this).val());
            $(".selIput").hide();
            $(".selText").show().text("￥"+upMoney);
            bindClick();
        });

        function diseaCnt(){
            var cnt = 0;
            $(".ul_disea li").each(function (){
                if($(this).hasClass("rd-bg")){
                    cnt ++;
                }
            });
            return cnt;
        }
        $(".ul_disea li").click(function(){
            if(!$(this).hasClass("rd-bg")&&diseaCnt()>=3){
                $.toast("最多只能选3项","text");
                return ;
            }
            $(this).toggleClass("rd-bg");
            if($(this).hasClass("rd-bg")){
                disea+=$(this).text+",";
            }else{
                disea=disea.replace($(this).text+",","");
            }
        });

       var orderOk = false;
       var payParam;
       function onBridgeReady(){
           if(orderOk) {
               WeixinJSBridge.invoke(
                   'getBrandWCPayRequest', {
                       "appId": payParam.appId,     //公众号名称，由商户传入
                       "timeStamp": payParam.timeStamp,         //时间戳，自1970年以来的秒数
                       "nonceStr": payParam.nonceStr, //随机串
                       "package": payParam.package,
                       "signType": payParam.signType,         //微信签名方式：
                       "paySign": payParam.paySign //微信签名
                   },
                   function (res) {
                       if (res.err_msg == "get_brand_wcpay_request:ok") {
                            location.href="/wcpay/doctor_up_msg.html?patientId="+patientId+"&doctorId="+doctorId+"&tag=chat";
                       } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                           $.toast("您已取消支付");
                       } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                           $.toast("支付失败：" + JSON.stringify(res));
                       }
                   }
               );
           }
       }

       function pay(){
            if(!patientId){
                $.toast("未识别当前用户，不能操作！","text")
                return;
            }
           if(!upMoney){
                $.toast("请选择赞赏金额！","text")
                return;
           }
           var comment = $(".texta").val();
           if(comment ==""){
               $.toast("请对本次诊疗的进行评价","text")
               return;
           }

           if(disea==""){
               $.toast("请至少 选择一个病、症名","text")
               return;
           }

           //先去下单
           $.ajax({
               url:"/wcpay/wcorder",
               type:"post",
               dataType:"json",
               data:{"patientId":patientId,"money":upMoney,"title":"赞赏医师",
               "disea":disea,"comment":comment},
               async:false,
               success:function(da){
                   if(da.msg == "ok"){
                       orderOk = true;
                       payParam = da.data;
                   }
               }
           });

           if (typeof WeixinJSBridge == "undefined"){
               if( document.addEventListener ){
                   document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
               }else if (document.attachEvent){
                   document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                   document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
               }
           }else{
               onBridgeReady();
           }
       }
       
       $("#submitDataBtn").click(function () {
           pay();
       });

       $(".commarea").focus(function(){
           setTimeout(function(){
               document.getElementById("bottomDiv").scrollIntoViewIfNeeded(true);// 参数可以是true， false, 空参数
           }, 300);
       });

</script>
</body>
</html>